<template>
  <van-row gutter="10" class="address">
    <van-col span="24" style="margin: 10px 0">{{ title }}</van-col>
    <van-col span="8" v-for="(item,inx) in list" :key="item.id">
      <van-button
        plain
        type="info"
        block
        @click="
          title === '贷款额度' ? handlyClickLimit(item,inx) : handlyClickBtn(item)
        "
        :class="{isActive:inx===isActive}"
        style="margin-bottom: 10px"
        >{{ item.content }}</van-button
      >
    </van-col>
    <van-col span="24" style="margin: 10px 0" v-if="title === '贷款额度'">
      <van-button block type="info" @click="handlyClickLimitNext()"
        >下一步</van-button
      >
    </van-col>
  </van-row>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
import { Toast } from "vant";
export default {
  props: {
    list: {
      require: true,
      type: Array,
    },
    title: {
      require: true,
      type: String,
    },
    isVisible: {
      require: true,
      type: Boolean,
    },
  },
  name: "LikeTableList",
  data() {
    return {
      isActive:Number
    };
  },
  methods: {
    ...mapMutations(["PUSTH_HISTORY", "CHANGE_HISTORY"]),
    handlyClickBtn(item) {
      let num = this.num;
      this.PUSTH_HISTORY({ num, ...item });
      //this.changenum++;
      this.$emit("update:isVisible", !this.isVisible);
    },
    /* 点击贷款额度 */
    handlyClickLimit(item,inx) {
      //console.log("我是额度");
      //debugger
      this.isActive=inx
      if (this.historyList.findIndex((val) => val.num === 2) !== -1) {
        let num = 2;
        this.CHANGE_HISTORY({ num, item: { num, ...item } });
        //debugger;
      } else {
        let num = this.num;
        this.PUSTH_HISTORY({ num, ...item });
      }
    },
    /* 点击贷款额度下一步 */
    handlyClickLimitNext() {
      //console.log("下一步");
      if (this.historyList.length < 2) {
        Toast.fail("请选择贷款额度信息");
        return;
      }
      this.$emit("update:isVisible", !this.isVisible);
    },
  },
  computed: {
    ...mapGetters(["num", "historyList"]),
  },

  created() {},
  mounted() {},
};
</script>

<style scoped>
.isActive {
  background-color: #1989fa;
  color: #fff;
}
</style>